<template>
	<div class="theme">
		<van-nav-bar title="提交反馈" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<van-cell-group style="margin: 20px 0px;">
					<van-field v-model.trim="value" placeholder="主题" maxlength="25" />
				</van-cell-group>
				<van-cell-group style="margin: 20px 0px;">
					<van-field autosize show-word-limit type="textarea" rows="5" v-model.trim="msg" placeholder="请输入详细的问题，提交钱包地址交易请尽量使用文本格式" maxlength="200" />
					<div style="padding: 15px;">
						<span>图片上传</span>
						<span style="float: right;color: #7d7e80;">{{index}}/5</span>
						<div style="padding-top: 15px;">
							<van-uploader v-model="fileList" multiple :max-count="5" :after-read="afterRead" @delete="deleteImg" />
						</div>
					</div>
				</van-cell-group>
				<van-cell-group style="margin: 20px 0px;">
					<van-field v-model.trim="email" placeholder="你的邮箱" maxlength="25" />
				</van-cell-group>
				<div style="padding: 10px 10px;">
					<van-button type="default" style="width: 100%;border-radius: 5px;" :loading="loading" color="rgb(16, 140, 233)" @click="isOk">提交</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Help',
		components: {},
		props: {},
		data() {
			return {
				value: '',
				msg: '',
				fileList: [],
				index: 0,
				email: '',
				loading: false
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onClickLeft() {
				this.$router.push({
					path: '/Mine'
				});
			},
			afterRead(file) {
				this.index = this.index + 1;
				// 此时可以自行将文件上传至服务器
				console.log(file);
			},
			deleteImg() {
				this.index = this.index - 1;
				console.log(1)
			},
			isOk() {
				if(!this.value) {
					this.$toast("主题不能为空");
					return false;
				}
				if(!this.msg) {
					this.$toast("详细内容不能为空");
					return false;
				}
				if(!this.email) {
					this.$toast("邮箱不能为空");
					return false;
				}
				const reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; // 邮箱格式验证
				if(!reg.test(this.email)) {
					this.$toast("邮箱格式不正确");
					return false;
				}
				this.loading = true;
				setTimeout(() => {
					this.$toast("反馈成功");
					this.loading = false;
					this.$router.push({
						path: '/Mine'
					})
				}, 1500);
			}
		},
		created() {},
		mounted() {},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
	}
</style>